<template>
  <el-row style="width: calc(100% - 2px); height: 65px; background-color: #334157; margin-left: 2px; position: relative">
    <el-icon class="el-icon-s-fold"
      style="color: rgb(220 222 227); line-height: 65px; font-size: 36px; margin-left: 25px"></el-icon>

    <el-menu default-active="1" class="el-menu-demo; user-menu" mode="horizontal" @select="handleSelect"
      background-color="#334157" text-color="#fff" active-text-color="#fff"
      style="position: absolute; right: 5px; top: 0px; border: none">
      <!-- <el-menu-item index="1" @click="gotoCustomPage">美食之旅</el-menu-item> -->
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1" @click="exit()">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-row>
</template>

<script>
export default {
  name: 'cTopHeader',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => { }
    }
  },
  methods: {
    gotoCustomPage() {
      this.$router.replace({
        path: '/custom'
      })
    },
    exit() {
      localStorage.removeItem('uP')
      this.$message.success('退出成功')
      this.$router.replace({
        path: '/'
      })
    },
    handleSelect() { }
  }
}
</script>

<style lang="css" scoped></style>
